import { computed, defineComponent, ref } from 'vue';
import ActiveState from './ActiveState.vue';
import AvatarLeft from './AvatarLeft.vue';
import AvatarRight from './AvatarRight.vue';
import Basic from './Basic.vue';
import Dark from './Dark.vue';
import Dense from './Dense.vue';
import ExampleContacts from './ExampleContacts.vue';
import ExampleEmails from './ExampleEmails.vue';
import ExampleFolders from './ExampleFolders.vue';
import ExampleMenu from './ExampleMenu.vue';
import ExampleSettings from './ExampleSettings.vue';
import ItemLabel from './ItemLabel.vue';
import LinksWithGo from './LinksWithGo.vue';
import SideSection from './SideSection.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>ActiveState</h5>
            <ActiveState />
          </div>
          <div class='block-'>
            <h5 class='title'>AvatarLeft</h5>
            <AvatarLeft />
          </div>
          <div class='block-'>
            <h5 class='title'>AvatarRight</h5>
            <AvatarRight />
          </div>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>Dark</h5>
            <Dark />
          </div>
          <div class='block-'>
            <h5 class='title'>Dense</h5>
            <Dense />
          </div>
          <div class='block-'>
            <h5 class='title'>ExampleContacts</h5>
            <ExampleContacts />
          </div>
          <div class='block-'>
            <h5 class='title'>ExampleEmails</h5>
            <ExampleEmails />
          </div>
          <div class='block-'>
            <h5 class='title'>ExampleFolders</h5>
            <ExampleFolders />
          </div>
          <div class='block-'>
            <h5 class='title'>ExampleMenu</h5>
            <ExampleMenu />
          </div>
          <div class='block-'>
            <h5 class='title'>ExampleSettings</h5>
            <ExampleSettings />
          </div>
          <div class='block-'>
            <h5 class='title'>ItemLabel</h5>
            <ItemLabel />
          </div>
          <div class='block-'>
            <h5 class='title'>LinksWithGo</h5>
            <LinksWithGo />
          </div>
          <div class='block-'>
            <h5 class='title'>SideSection</h5>
            <SideSection />
          </div>
        </div>
      );
    };
  },
});
